

import React, { Component } from 'react'
import { Row, Col, Card } from 'antd'
import Utils from '../../utils/Utils'
import Axios from '../../axios'
import './orderDetail.less'

class OrderDetail extends Component {
    state = {
        orderInfo: {}
    }
    componentDidMount() {
        let orderId = this.props.match.params.orderId
        this.setState({
            userName: '稻城',
            orderId
        })
        if (orderId) {
            this.request(orderId)
        }
    }
    request = (orderId) => {
        this.orderId = orderId
        Axios.ajax({
            url: '/order/detail',
            data: {
                params: {
                    orderId
                }
            }
        }).then((res) => {
            if (res.code == '0') {
                this.setState({
                    orderInfo: res.result
                })
                this.renderMap(res.result)
                console.log(res.result)
            }
        })
    }
    renderMap = (result) => {
        this.map = new window.BMap.Map("orderDetailMap");          // 创建地图实例  
        this.map.centerAndZoom('北京', 11);
        //开启鼠标缩放
        this.map.enableScrollWheelZoom(true);
        //添加控件方法
        this.addMapControl()
        //调用路线图绘制方法
        this.drawBikeRoute(result.position_list)
    }
    //添加地图控件
    addMapControl = () => {
        let map = this.map;
        map.addControl(new window.BMap.NavigationControl({ type: window.BMAP_NAVIGATION_CONTROL_SMALL }));
    }
    //调用路线图绘制方法
    drawBikeRoute = (positionList) => {
        let map = this.map;
        let startPoint = ''
        let endPoint = ''
        if (positionList.length > 0) {
            let first = positionList[0]
            startPoint = new window.BMap.Point(first.lon, first.lat)
            let startIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36, 42), {
                // 设置图片偏移。   
                // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
                // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
                imageSize: new window.BMap.Size(36, 42),   // 设置图片偏移   
                // 指定定位位置。   
                // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
                // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
                // 图标中央下端的尖角位置。    
                anchor: new window.BMap.Size(18, 42),
 
            });
            // 创建标注对象并添加到地图  
            let startMarker = new window.BMap.Marker(startPoint, { icon: startIcon});
            this.map.addOverlay(startMarker);

            let last = positionList[positionList.length - 1]
            endPoint = new window.BMap.Point(last.lon, last.lat)
            let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                anchor: new window.BMap.Size(18, 42)
            })
            // 创建标注对象并添加到地图  
            let endMarker = new window.BMap.Marker(endPoint, { icon: endIcon});
            this.map.addOverlay(endMarker);

            // 连接路线图
            let trackPoint = [];
            for(let i=0;i<positionList.length;i++){
                let point = positionList[i];
                trackPoint.push(new window.BMap.Point(point.lon, point.lat));
            }

            let polyline = new window.BMap.Polyline(trackPoint,{
                strokeColor:'#1869AD',
                strokeWeight:3,
                strokeOpacity:1
            })
            this.map.addOverlay(polyline);
            this.map.centerAndZoom(endPoint, 11);  // 初始化地图，设置中心点坐标和地图级别
        }

    }
    render() {
        return (
            <div >
                <Row className="mapHeader-top">
                    <Col>
                        <div className="order-logo">
                            <img src="./favicon.ico" alt="" />
                            <span>欢迎来到DAO C管理系统</span>
                        </div>
                    </Col>
                    <Col>
                        <span>欢迎，{this.state.userName}</span>
                        <a href="##">退出</a>
                    </Col>
                </Row>
                <div style={{ margin: '40px' }}>
                    <Card title="骑行信息" className="map-card">
                        <div id="orderDetailMap" className="order-map"></div>
                        <div className="detail-items">
                            <div className="item-title">基础信息</div>
                            <ul>
                                <li>
                                    <Row>
                                        <Col span={4}>用车模式：</Col>
                                        <Col span={20}>{this.state.orderInfo.mode == '2' ? '加盟' : '自营'}</Col>
                                    </Row>
                                </li>
                                <li>
                                    <Row>
                                        <Col span={4}>订单编号：</Col>
                                        <Col span={20}>{this.state.orderInfo.order_sn}</Col>
                                    </Row>
                                </li>
                                <li>
                                    <Row>
                                        <Col span={4}>车辆编号：</Col>
                                        <Col span={20}>{this.state.orderInfo.bike_sn}</Col>
                                    </Row>
                                </li>
                                <li>
                                    <Row>
                                        <Col span={4}>用户姓名：</Col>
                                        <Col span={20}>{this.state.orderInfo.user_name}</Col>
                                    </Row>
                                </li>
                                <li>
                                    <Row>
                                        <Col span={4}>手机号码：</Col>
                                        <Col span={20}>{this.state.orderInfo.mobile}</Col>
                                    </Row>
                                </li>
                            </ul>
                        </div>
                        <div className="detail-items">
                            <div className="item-title">行使轨迹</div>
                            <ul>
                                <li>
                                    <Row>
                                        <Col span={4}>行程起点：</Col>
                                        <Col span={20}>{this.state.orderInfo.start_location}</Col>
                                    </Row>
                                </li>
                                <li>
                                    <Row>
                                        <Col span={4}>行程终点：</Col>
                                        <Col span={20}>{this.state.orderInfo.end_location}</Col>
                                    </Row>
                                </li>
                                <li>
                                    <Row>
                                        <Col span={4}>行驶里程：</Col>
                                        <Col span={20}>{this.state.orderInfo.distance / 1000} 公里</Col>
                                    </Row>
                                </li>
                            </ul>
                        </div>
                    </Card>
                </div>
            </div>
        )
    }
}
export default OrderDetail